﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
    <link rel="stylesheet" type="text/css" href="build/tabview/assets/skins/sam/tabview.css" />
    <script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="build/element/element-min.js"></script>
    <script type="text/javascript" src="build/tabview/tabview-min.js"></script>

    <style type="text/css">
        #demo ul.yui-nav li span.close {
        background-image: url(close12_1.gif);
        
        width: 12px;
        height: 12px;
        position: absolute;
        top: 2px;
        right: 2px;
    }
    </style>

</head>
<body class="yui-skin-sam">

<input type="button" onclick="addTabs()" id="Add" value="Add" />
<input type="button" onclick="removeTabs()" id="Remove" value="Remove" />

<div id="demo">
    <ul class="yui-nav">
        <li class="selected"><a href="#"><em>Tab Two Label<span class="close">X</span></em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab2" style="margin:0; padding:0">
            <iframe src="#" style="width:100%; height:100%"></iframe>
        </div>
    </div>
</div>

<script type="text/javascript">
    (function () {
        var tabView = new YAHOO.widget.TabView('demo');
        
    })();
    function addTabs() {
        var tabView = new YAHOO.widget.TabView('demo');
        var labelText = 'New Message<span class="close"></span><span class="icon"></span>';
        var content = "<iframe src='#' style='width:100%; height:100%'></iframe>";
        if (labelText && content) {
            tabView.addTab(new YAHOO.widget.Tab({ label: labelText, content: content, active: true, id: 'composeView' }));
        }
    }
    function removeTabs() {
        var tabView = new YAHOO.widget.TabView('demo');
        var removeTab = tabView.removeTab(tabView.get('activeTab'));     

        YAHOO.util.Event.on('Remove', 'click', removeTab);   
    }
</script>



</body>
</html>
